<template>
  <div class="rightLike">
    <meta name="referrer" content="no-referrer" />
    <h3 class="lickText">猜你喜欢</h3>
    <div>
      <div
        class="goodInfo"
        v-for="item in data.rightLikeData"
        :key="item.itemId"
      >
        <img v-lazy="item.imgUrl" alt="图片" />
        <div class="shopName">{{ item.title }}</div>
        <div class="address">{{ item.areaName }}</div>
        <div class="allPice">
          ￥<span class="pice">{{ item.lowPrice }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
const rightLikeData = require("../../../data/rightLike.json");
const data = ref({
  rightLikeData: {},
});
onMounted(() => {
  data.value.rightLikeData = rightLikeData;
});
</script>
<style lang="less" scoped>
.wrapper .rightLike {
  background-color: #fff;
  border: 1px solid rgba(173, 173, 173, 0.467);
  border-radius: 5px;
  float: right;
  height: 100%;
  width: 230px;
  padding: 20px;
  box-sizing: border-box;
  text-align: start;
  .shopName {
    font-size: 14px;
    margin: 10px 0 5px;
  }
  .address {
    font-size: 12px;
    color: #9999;
  }
  .allPice {
    color: #f60;
    .pice {
      font-size: 22px;
    }
  }
  h3 {
    margin: 0;
    font-weight: bold;
    margin-bottom: 12px;
  }
}

.goodInfo {
  padding-bottom: 20px;
}
/* .goodInfo :last-child {
		padding-bottom: none;
	} */
.goodInfo img {
  width: 188px;
  height: 106px;
}
</style>
